<template>
  <div class="app-container">
    <el-card>
      <MyNavBar>
        <template #before>
          <el-form>
            <el-form-item>
              <el-input
                v-model="searchData"
                placeholder="根据用户名搜索"
                size="small"
                style="width: 200px"
              />
              <el-button size="small" style="margin-left: 15px" @click="clearKeyword">清空</el-button>
              <el-button type="primary" size="small" @click="searchPermission">搜索</el-button>
            </el-form-item>
          </el-form>
        </template>
        <template #after>
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="addPerimission"
          >新增权限组</el-button>
        </template>
      </MyNavBar>
      <el-alert type="info" :closable="false">
        <div class="el-alert__description">
          <i class="el-icon-info" style="font-size: 16px" />
          <div class="el-alert__content">
            <span class="el-alert__title">共{{ page.counts }}条记录</span>
          </div>
        </div>
      </el-alert>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="title" label="用户名" width="542" align="center" />
        <el-table-column
          prop="create_date"
          label="日期"
          width="514"
          sortable
          align="center"
        />
        <el-table-column prop="address" label="操作">
          <template v-slot="{row}">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="editPermission(row)"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="deletePermission(row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 放置分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height:60px">
        <el-pagination
          :current-page="page.page"
          :page-size="page.pageSize"
          :total="page.counts"
          layout="prev,pager,next"
          @current-change="changePage"
        />
      </el-row>
      <addPermission
        :add-permission-dialog-show.sync="addPermissionDialogShow"
        :role-id="RoleId"
        :role="role"
      />
    </el-card>
  </div>
</template>

<script>
import addPermission from './component/addPermission.vue';
import MyNavBar from '@/components/MyNavBar/MyNavBar.vue'
import { permissionListAPI, deleltePermissionAPI } from '@/api'
export default {
  components: {
    addPermission,
		MyNavBar
  },
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      addPermissionDialogShow: false,
      RoleId: null,
      role: {},
      searchData: '',
			page: {
				page: 1,
				pageSize: 10,
				counts: 0,
				keyword: ''
			}
    };
  },
	created() {
		this.getpermissionList()
	},
	methods: {
		// 请求权限数据的列表
		async	getpermissionList() {
			const res = await permissionListAPI(this.page)
			const { counts, pagesize, pages, page, list } = res
			// eslint-disable-next-line no-sequences
			this.page.page = page,
			this.page.pageSize = pagesize,
			this.page.counts = counts,
			this.tableData = list
		},
		// 点击新增，新增权限
		addPerimission() {
			this.addPermissionDialogShow = true
		},
		// 点击编辑,编辑权限
		editPermission(row) {
			this.role = row
			this.RoleId = row.id
			this.addPermissionDialogShow = true
		},
		// 点击分页按钮，切换分页
		changePage(newpage) {
			this.page.page = newpage
			this.getLabelTags()
		},
		// 点击搜索按钮，搜索关键字
		searchPermission() {
			const arr = []
			this.tableData.forEach(item => {
				if (item.title.indexOf(this.searchData) !== -1) {
					return arr.push(item)
				}
			})
			this.tableData = arr
		},
		// 点击清空按钮，清空输入框的值
		clearKeyword() {
			this.searchData = ''
			this.getpermissionList()
		},
		// 点击删除按钮，删除当前行的权限
		async deletePermission(row) {
			try {
				await	this.$confirm('确定要删除该权限吗？')
				await deleltePermissionAPI(row.id)
				this.getpermissionList()
				this.$message.success('删除成功！')
			} catch (err) {
				console.log(err);
			}
		}
	}
};
</script>

<style scoped>
.app-container{
	padding: 15px;
}
::v-deep .el-card__body{
	padding-top: 15px;
}
.el-alert .el-alert__description {
  font-size: 12px;
  margin: 5px 0 0;
  display: flex;
  align-items: center;
}
</style>